<template>
  <div class="page settingPage">

    <div class="page-waprrer" style="overflow: hidden">
      <Scroll>
        <div>

          <!--setting-inforBox start-->
          <div class="setting-inforBox">

            <div class="inforBox">

              <div class="inforBox-row pure-g">

                <div class="pure-u-1-3 topCol">

                  <p class="topCol-num">
                    {{animeToday}}
                  </p>

                  <p class="topCol-text">
                    今日人数
                  </p>

                </div>

                <div class="pure-u-1-3 topCol">

                  <p class="topCol-num">
                    {{animeRecently}}
                  </p>

                  <p class="topCol-text">
                    近7天人数
                  </p>

                </div>

                <div class="pure-u-1-3 topCol">

                  <p class="topCol-num">
                    {{infor.jibie || '---'}}
                  </p>

                  <p class="topCol-text">
                    对比其它总代理
                  </p>

                </div>

              </div>

              <div class="inforBox-row pure-g">

                <div class="pure-u-1-2 centerCol">

                    <div class="centerCol-left-self">
                        你的产品库:<span class="num" style="color: #ff1666">{{animeYours}}</span>
                    </div>

                    <div class="centerCol-left-other">
                        厂家产品库:<span class="num" style="color: #999999">{{animeManufacturers}}</span>
                    </div>

                </div>

                <div class="pure-u-1-2 centerCol centerCol-right">
                    <router-link to="/setting/edit" tag="div" class="centerCol-right-link">
                      <x-icon type="ios-plus-outline" size="50"></x-icon>
                    </router-link>
                </div>

              </div>

              <div class="inforBox-row pure-g">

                  <div class="content-way-title">
                      联系方式(填写后将显示在前端侧栏方便用户联系)
                  </div>

                  <div class="content-way">
                        <div class="content-way-info">
                            <p>姓 名: <span class="info-text">{{infor.AgentName || '暂未设置'}} </span> </p>
                            <p>电 话: <span class="info-text">{{infor.AgentPhone || '暂未设置'}}</span> </p>
                        </div>
                        <div class="content-way-edit">
                            <x-icon class="icon" @click.native="showToast" type="ios-plus-outline" size="50"></x-icon>
                        </div>
                  </div>

              </div>

              <div class="inforBox-row pure-g">

                <div class="pure-u-1-2 centerCol">

                    <div class="centerCol-left-num">
                        {{animeDealers}}
                    </div>

                    <div class="centerCol-left-title">
                       授权经销商
                    </div>

                </div>

                <div class="pure-u-1-2 centerCol centerCol-right">
                  <router-link to="/setting/add" tag="div" class="centerCol-right-link">
                    <x-icon type="ios-plus-outline" size="50"></x-icon>
                  </router-link>
                </div>

              </div>

            </div>

          </div>
          <!--setting-inforBox end-->

          <!--setting-commandBox start-->
          <div class="setting-commandBox">
            <div class="commandBox">
                <div class="commandBox-title">

                    <p class="commandBox-title-top">本月访问口令</p>

                    <p class="commandBox-title-password">{{infor.kouling || '----'}}</p>

                </div>
                <ul class="commandBox-list">
                    <li class="commandBox-list-item" v-for="item in infor.history">
                      <div class="title">
                          {{item.month}}月
                      </div>
                      <div class="pass">
                          {{item.val}}
                      </div>

                    </li>
                </ul>
            </div>
          </div>
          <!--setting-commandBox end-->

        </div>
      </Scroll>
    </div>

    <x-dialog v-model="Toast.state" class="setting-setInfoBox" hide-on-blur>
      <div class="setting-setInfoBox-main">
        <div class="main-title">
            联系方式设置
        </div>
        <div class="main-body">
            <x-input title="姓名" required  v-model="Toast.form.name"></x-input>

            <x-input title="电话" mask="999 9999 9999"  is-type="china-mobile" v-model="Toast.form.phone"></x-input>

            <div class="main-body-btnArea">

              <div class="main-body-btn" @click="EditAgentinfo">
                  提交
              </div>

            </div>

        </div>
      </div>
    </x-dialog>

  </div>
</template>
<script>
  import {getInfor,getKouling,EditAgentinfo,getAgentinfo} from "api/setting"
  import {mapGetters, mapMutations} from "vuex";
  import Scroll from "base/scroll/scroll";
  import Bus from "common/js/bus";
  import { CreateAniNum } from "common/js/util"
  import _ from "lodash";
  import {XDialog, XInput, Group, XButton} from "vux"
  import $ from "jquery";

  export default {
    data() {
      return {
        infor: {
          agentLoginNumToday: 0,
          agentLoginNum7: 0,
          jibie: '---',
          productNumMy:0,
          productNum:0,
          dailiNum:0,
          kouling:"",
          AgentName:"",
          AgentPhone:""
        },
        animeToday: 0,
        animeRecently:0,
        animeYours:0,
        animeManufacturers:0,
        animeDealers:0,
        Toast:{
          state:false,
          form:{
            name:"",
            phone:""
          }
        }
      }
    },
    computed: {
      ...mapGetters(['user_phone','user_id','user_name'])
    },
    methods: {
      _getInfor() {
        getInfor({id:this.user_id}).done(Rs => {
          Bus.$emit("loading-off");
          _.each(Rs, (val, key) => {
            key !== "kouling"?this.infor[key] = val:null;
          });
        });
        //获得口令
        getKouling().done(Rs =>{
          this.infor.kouling = Rs;
        })
      },
      intervalGetInfor(){
        this.interval = setInterval(()=>{
          this._getInfor();
        },30000)
      },
      showToast(){
          this.Toast.state = true;
      },
      async EditAgentinfo(){
        if(this.Toast.form.name!==""&&this.Toast.form.phone!==""){
          try{
            let Rs = await EditAgentinfo({
                id:this.user_id,
                user:this.Toast.form.name,
                phone:this.Toast.form.phone.replace(/ /g,"")
            });
            if(Rs.status === 0){
              this.$vux.alert.show({
                title: '修改成功',
                content: Rs.msg,
              });
              this.getAgentInfo();
              this.Toast.state = false;
            }
          }catch (err){
            console.log(err)
          }
        }else{
          this.$vux.alert.show({
            title: '提示',
            content: '验证未通过',
          })
        }
      },
      async getAgentInfo(){
         try{
           let Rs = await getAgentinfo({id:this.user_id});
           this.infor.AgentName = Rs.business_user;
           this.infor.AgentPhone = Rs.business_mobile;
         }catch (err){
           console.log(err)
         }
      },
      ...mapMutations({
        "setDrawerState": "SET_DRAWER_STATE",
        "setCommonHeader": "SET_COMMON_HEADER"
      })
    },
    components: {
      Scroll,
      XDialog,
      XInput,
      Group,
      XButton
    },
    beforeRouteEnter(to, from, next) {
      // 获得商品id
      next(vm => {
        vm.setDrawerState(false);
        _.delay(()=>{
          vm.setCommonHeader(2);
          vm._getInfor();
          vm.getAgentInfo();
        },200);
      })
    },
    beforeRouteLeave(to, from, next) {
      next(vm => {

      })
    },
    created() {
      _.delay(()=>{
        Bus.$emit("loading-on");
        this._getInfor();
        this.intervalGetInfor();
        this.getAgentInfo();
      },800);
    },
    watch: {
      ['infor.agentLoginNumToday'](newValue, oldValue) {
        CreateAniNum(newValue,oldValue,this,'animeToday');
      },
      ['infor.agentLoginNum7'](newValue, oldValue) {
        CreateAniNum(newValue,oldValue,this,'animeRecently');
      },
      ['infor.productNumMy'](newValue, oldValue) {
        CreateAniNum(newValue,oldValue,this,'animeYours');
      },
      ['infor.productNum'](newValue, oldValue) {
        CreateAniNum(newValue,oldValue,this,'animeManufacturers');
      },
      ['infor.dailiNum'](newValue, oldValue) {
        CreateAniNum(newValue,oldValue,this,'animeDealers');
      },
      "Toast.state"(val){
        if(val === true){
          $("#vux_view_box_body").css("z-index","inherit")
        }else{
          $("#vux_view_box_body").css("z-index","1")
        }
      }
    }
  }
</script>
<style lang="less">
  @import "../common/style/helpers/mixins";

  .setting-inforBox {
    margin-top: 45px;
    .inforBox {
      &-row {
        padding: 0.25rem 0;
        border-bottom: 1px solid #ccc;

        .topCol {
          height: 1.20rem;
          text-align: center;
          &-num {
            font-weight: 600;
            font-size: 0.5rem;
            color: #5982d5;
            .omit();
          }
          &-text {
            font-size: 0.24rem;
            padding: 0.2rem 0;
          }
        }

        .centerCol{
          &-left{
            &-self,&-other{
              padding: 0.1rem 0 0.1rem 0.3rem;
            }
            &-self{

            }
            &-other{

            }
            &-num{
              font-weight: 600;
              text-align: center;
              font-size: 0.5rem;
              color: #37cdb7;
              .omit();
            }
            &-title{
              text-align: center;
              font-size: 0.24rem;
              padding: 0.15rem 0;
            }
          }
          .num{
            font-size: 0.4rem;
            margin-left: 0.1rem;
            font-weight: 600;
          }
          &-right{
            display: flex;
            justify-content: flex-end;
            align-items: center;

            &-link{
              margin-right: 0.3rem;
              height: 1rem;
            }
          }
        }

        .content-way{
          display: flex;
          width: 100%;
          &-info{
            width: 65%;
            display: flex;
            margin-left: 5%;
            height: 1.2rem;
            line-height: 0.6rem;
            letter-spacing: 0.01rem;
            flex-direction: column;
            .info-text{
              border-bottom: 1px dotted #333;
              display: inline-block;
              padding-bottom: 0.04rem;
              padding-left: 0.04rem;
              padding-right: 0.04rem;
            }
          }
          &-edit{
            width: 30%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .icon{
              position: relative;
              left: -0.3rem;
            }
          }

          &-title{
            letter-spacing: 0.01rem;
            font-size: 0.24rem;
            text-align: left;
            text-indent: 0.3rem;
            width: 100%;
            height: 0.5rem;
            color: #666;
          }
        }
      }
    }
  }

  .setting-commandBox{
    width: 100%;
    padding:0.1rem 0;
    .commandBox{
      width: 100%;
      &-title{
        text-align: center;
        &-top{
          height: 0.4rem;
          line-height: 0.4rem;
          text-align: center;
          color: #555766;
        }
        &-password{
          font-weight: 600;
          font-size: 0.55rem;
          color: #ff3333;
        }
      }
      &-list{
        display: flex;
        justify-content: center;
        margin-top: 0.2rem;
        &-item{
          width: 19.5%;
          height:1rem;
          margin: 0.1rem 0;
          text-align: center;
          .title{
            height: 0.4rem;
            line-height: 0.4rem;
          }
          .pass{
            font-size: 0.26rem;
            height: 0.6rem;
            line-height: 0.6rem;
            color: #999;
          }
        }
      }
    }
  }

  .setting-setInfoBox{
    &-main{
      height: 4.5rem;
      width: 100%;
      .main-title{
        height: 0.9rem;
        line-height: 0.9rem;
        font-weight: 500;
        font-size: 0.28rem;
      }
      .main-body{
        width: 90%;
        position: relative;
        left: 5%;
        .vux-x-input{
          border-bottom: 1px dotted #ccc;
        }
        &-btn{
          width: 3rem;
          height: 0.7rem;
          line-height: 0.7rem;
          background: red;
          border-radius: 0.05rem;
          color: #fff;
        }
        &-btnArea{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          padding: 0.6rem 0;
          transition: all 0.3s;
          &:active{
            opacity: 0.3;
          }
        }
      }
    }
  }
</style>
